<template>
  <div class="music">
    <h3>Music</h3>
    <div>
      <button @click="$router.push({
        name: 'MusicDetail',
        params: {
          id: '1',
          age: '20'
        }
      })">王俊凯</button>

      <button @click="$router.push({
        name: 'MusicDetail',
        params: {
          id: '2',
          age: '30'
        }
      })">王源</button>
      
      <button @click="$router.push({
        name: 'MusicDetail',
        params: {
          id: '3',
        }
      })">易烊千玺</button>
    </div>
    <!-- 三级路由出口 -->
    <router-view></router-view>
  </div>
  
</template>

<script>
export default {
  name: "Music",
  mounted() {
    console.log('Music');
  },
  beforeDestroy() {
    console.log('Music Destroy');
  }
};
</script>

<style scoped>
.music {
  background-color: orange;
}
</style>
